<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>人物介绍</title>
		<link rel="stylesheet" href="../css/7.css" />
		<style>
			body {
				background-color: whitesmoke;
			}
			.words  {
				width: 80%;
				height: auto;
				/* background-color: whitesmoke; */
				margin: 20px 10%;
				margin-bottom: 120px;
				padding-bottom: 120px;
			}
			
			.words ul {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				list-style: none;
			}
			
			.words ul li {
				width: calc(100% / 3.2);
				margin: 50px 1%;
				box-shadow: 1px 3px 3px darkgray;
				background-color: white;
			}
			
			.words ul li img {
				width: 190px;
				height: 190px;
				box-shadow: 1px 3px 3px darkgray;
				display: block;
				margin: 30px auto;
				border-radius: 12px;
				object-fit: cover;
			}
			
			.words ul li img:hover {
				transition: all .3s;
				box-shadow:6px 6px 10px darkgray;
			}
			
			.words ul li .username {
				text-align: center;
				font-weight: bold;
				font-size: 30px;
				line-height:80px;
			}
			
			.words ul li .msgs {
				line-height: 55px;
				font-size: 30px;
				padding: 40px;
			}
			.author,
		.movies {
			width: 80%;
			height: auto;
			margin: 30px 10%;
		}

		.author p {
			text-indent: 2em;
			font-size: 30px;
			margin-top: 20px;
			color: hotpink;
		}


		.movies {
			width: 80%;
			height: auto;
			/* background-color: whitesmoke; */
			margin: 20px 10%;
			margin-bottom: 120px;
			padding-bottom: 120px;
		}

		.movies ul {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			list-style: none;
		}

		.movies ul li {
			width: calc(100% / 3.2);
			margin: 50px 1%;
			box-shadow: 1px 3px 3px darkgray;
			background-color: white;
			padding: 40px;
		}

		.movies ul li img {
			width: 100%;
			height: 390px;
			box-shadow: 1px 3px 3px darkgray;
			display: block;
			margin: 10px auto;
			border-radius: 12px;
			object-fit: cover;
		}

		.movies ul li img:hover {
			transition: all .3s;
			box-shadow: 6px 6px 10px darkgray;
		}

		.movies ul li .username {
			font-weight: bold;
			font-size: 30px;
			line-height: 70px;
			color: hotpink;
		}

		.movies ul li .msgs {
			line-height: 55px;
			font-size: 30px;
			color: blue;
		}

		/* 添加导航栏字体大小样式 */
		.weizhi .shell li span a,
		.weizhi .shell li ul li a {
			font-size: 20px;
			/* 你可以根据需要调整这个值 */
		}

		.weizhi .shell li ul li {
			font-size: 20px;
			/* 用于非链接文本 */
		}

		/* 新增或修改导航栏字号样式 */
		.weizhi ul,
		.weizhi ul li,
		.weizhi ul li span,
		.weizhi ul li a {
			font-size: 20px;
		}

		/* 调整字号大小 */
		</style>
	</head>
	<body>

		<div class="weizhi">
			<ul class="shell">
				<li class="button">
					<span><a href="../朋友圈网站.html">首页</a></span>
					<ul>
						<li><a href="留言.html">留言板</a></li>
						<li><a href=关于我们.html>关于我们</a></li>
						<li><a href="登录.html">登录</a></li>
					</ul>
				</li>
	
				<li class="button">
					<span><a href="书单.html">书单</a></span>
					<ul>
						<li>推理</li>
						<li>成长</li>
						<li>科幻</li>
						<li>心理</li>
					</ul>
				</li>
	
				<li class="portrait">
					<ul class="information">
						<li>特立独行的猫</li>
						<li>bilibili:喝加啡の猫</li>
						<li>QQ632406603</li>
					</ul>
				</li>
	
				</li>
				<li class="button">
					<span><a href="小众电影1.html">小众电影</a></span>
					<ul>
	
					</ul>
				</li>
	
				<li class="button">
					<span><a href="动画.html">动画推荐</a></span>
					<ul>
	
					</ul>
				</li>
			</ul>
		</div>

		<div class="banner"></div>
		<h4 class="title">人物介绍</h4>
		
		
		<div class="words">
			
			<ul>
				
				<li>
					<img src="../image/关于我们 (1).jpg" alt="" />
					<div class="username">表张大会</div>
					<div class="msgs">
						
					</div>
				</li>
				
				
				<li>
					<img src="../image/关于我们 (2).jpg" alt="" />
					<div class="username">冰红茶</div>
					<div class="msgs">
						
					</div>
				</li>
				
				
				
				<li>
					<img src="../img/popo.jpg" alt="" />
					<div class="username"></div>
					<div class="msgs">
						
					</div>
				</li>
				
				
				<li>
					<img src="../img/qianpopo.jpg" alt="" />
					<div class="username"></div>
					<div class="msgs">
					
					</div>
				</li>
				
				
				<li>
					<img src="../img/wuliannan.jpg" alt="" />
					<div class="username"></div>
					<div class="msgs">
					
					</div>
				</li>
				
				
				<li>
					<img src="../img/baobao.jpg" alt="" />
					<div class="username"></div>
					<div class="msgs">
						
					</div>
				</li>
				
				
				<li>
					<img src="../img/yeye.jpg" alt="" />
					<div class="username"></div>
					<div class="msgs">
						
					</div>
				</li>
				
				
				<li>
					<img src="../img/xiaoling.jpg" alt="" />
					<div class="username"></div>
					<div class="msgs">
						
					</div>
				</li>
				
				
				<li>
					<img src="../img/heshen.jpg" alt="" />
					<div class="username"></div>
					<div class="msgs">
						
					</div>
				</li>
				
				
			</ul>
			
			
			
			
			
		</div>
		
		
		
		
		
		<div class="footer"></div>

		
		<script>
			$(()=>{
				$(".banner").css("background-image", "url('../img/photo (8).jpg')")
			})
		</script>
	</body>
</html>